<template>
    <page-view class=" flex flex-row">

        <div class="left-bar w-[450] h-full">
            <img src="../img/login-img.jpg" class="w-full h-full" alt="">
        </div>
        <div class="flex-1 flex flex-col right-bar">
            <div class="flex justify-between m-20 right-bar-item">
                <img src="../img/logo.png" class="w-[60px] h-[60px]" alt="">
                <ul class="flex justify-end space-x-7 title-text">
                    <li>用户协议</li>
                    <li>隐私政策</li>
                    <li>帮助中心</li>
                    <li>中文简体</li>
                </ul>
            </div>

            <div class="tab-bar flex-1 flex justify-center items-center">
                <slot></slot>
            </div>
        </div>
    </page-view>
</template>
    
<script setup>

</script>
    
<style scoped lang="scss">
.login-box {
    @apply w-[550px] py-[60px];
    box-shadow: 0 0 25px 10px gray;
}

.right-bar-item {
    >.title-text {
        li:hover {
            @apply text-red-500;
        }
    }
}


</style>